insert images in webpage

insert vido in webpage using object tag

code:
            <div>
                <object class="example-1" width="500" height="350" title="Wuzhen" style="margin-left:4vw;">
                    <param name="movie-1" value="Wuzhen-20-10_9091.mp4">
                    <param name="quality-1" value="high"> 
                    <embed src="../images/Wuzhen-20-10_01.mp4" quality="high" type="video/mp4" width="500" 
                    height="350"></embed>
                </object>
            </div>

insert image using object tag

code:
            <object class="example-2" width="500" height="350" title="holidays" style="margin-left: 10vw;">
                <param name="image-2" value="2.jpg">
                <param name="quality-2" value="high"> 
                <embed src="2.jpg" quality="high" type="image/jpg" width="500" height="350"></embed>
            </object>

insert media files (e.g. gif files) with object tag

code:
        <div class="example-3"class="flex-container" style=" display: flex; margin-left: 2vw;">
            <object height="250" width="400" data="../images/gif1.gif"></object>  
            <object height="250" width="400" data="../images/gif2.gif"></object>  
            <object height="250" width="400" data="../images/gif3.gif"></object>  
            <object height="250" width="400" data="../images/ducks.gif">Sorry!,Your browser does not support</object>  
        </div>

insert PDF file with object tag

You don't have a PDF plugin, but you can download the PDF file.

code:

            <object class="example-4" data="../images/blog-20-12-13.pdf" type="application/pdf" width="500" height="300" 
            style="margin-left: 10vw;" typemustmatch> </object>
            <p>You don't have a PDF plugin, but you can <a href="../images/blog-20-12-13.pdf"> download the PDF file.
            </a></p>

insert media using "img" tag

insert image using img tag

code:
            <h3>insert image using img tag</h3>
            <div>
                <img src="../images/1.jpg" alt="holiday">
            </div>
            <style>
                img{width: 100%; margin-top: 15px;}
            </style>

insert image using embed tag

code:
            <h3>insert image using embed tag</h3>
            <div>
                <embed src="../images/1.jpg" alt="holiday">
            </div>
            <style>
                embed{width: 100%; margin-top: 15px;}
            </style>

show image in HTML using img tag, with or without Javascript

            <div class="spec">
                <img src="../images/1.jpg" id="foto-1" alt="holiday" width="40%" height="40%" title="holidays photo 1"/>
                <img id="foto-2" src="" alt="">
            </div>
            <style>
                #foto-1{border: 0.2vw solid burlywood; border-radius: 10%; }
                #foto-1{filter: opacity(0.8); margin: 0 2vw;}
            </style>
            <script>
                const picture1 = document.querySelector("#foto-2"); 
                picture1.src = "../images/2.jpg";
                picture1.title = "holidays photo 2";
                picture1.width = "400";
                picture1.height = "280";
                picture1.style.opacity = "0.8";
                picture1.style.marginLeft = "2vw";
            </script>

insert image using "background-image" property

code:
        <div class="image-container"></div>
        <style>
            .image-container{background-image:url("../images/1a.jpg"); background-size: cover; 
            width: 30vw; height: 30vw; margin-left: 1vw;}
        </style>

insert media in webpage

Content

insert media using "object" tag